require('../../less/controls/navigation_menu.less');
var React = require('react');

module.exports = React.createClass({
	displayName:'NavigationMenu',
	getInitialState:function(){
		return {
			curr: 0
		}
	},
	componentDidMount:function(){

	},
	parsePath: function (item){
		if(item.parent){
			return [item.parent.title, item.title];
		}else {
			return [item.title];
		}
	},
	__onItemClick: function (item, index, event){
		event.stopPropagation();
		if(item.items && item.items.length){
			item.active = !item.active;
			this.refs['item_'+index].getDOMNode().setAttribute('data-active', item.active);
			return;
		}
		this.setState({
			curr: item
		});
		this.props.onItemClick && this.props.onItemClick(item, index, this.parsePath(item));
	},
	render:function(){
		var _items = this.props.items;
		return (
			<div className="c-navigation_menu">
				<ul>
					{
						_items && _items.map(function (item, index){
							item.active = item.active || true;
							var _ifExt = item.items && item.items.length;
							return <li ref={ "item_" + index } data-active={ item.active } className={this.state.curr === item ? 'curr' : ''} key={index} onClick={(event)=>this.__onItemClick(item, index, event)}>
								<div>
									<i className={"fa " + item.icon}></i>
									{item.title}
									{/*_ifExt && <i className="ext fa"></i>*/}
								</div>
								<ul className="sub-nav">
								{
									_ifExt && item.items.map(function (_item, _index){
										_item.parent = item;
										return <li className={this.state.curr === _item ? 'curr' : ''} key={_index} onClick={(event)=>this.__onItemClick(_item, _index, event)}>
											<div><i className={"fa " + _item.icon}></i>{_item.title}</div>
										</li>;
									}.bind(this))
								}
								</ul>
							</li>;
						}.bind(this))
					}
				</ul>
			</div>
		);
	}
});
